/* CSS Variables and Theme Configuration */

/* Light Theme Variables (Default) */
:root,
:root.light {
  /* 基础颜色 */
  --background-color: #ffffff;
  --surface-color: #fafafa;
  --border-color: #e1e1e1;
  --border-light: #f0f0f0;
  --text-color: #2c3e50;
  --text-secondary: #606266;
  --text-muted: #909399;
  
  /* 主要颜色 */
  --primary-color: #42b883;
  --primary-light: #4fc08d;
  --primary-dark: #369870;
  
  /* 状态颜色 */
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --info-color: #409eff;
  
  /* 阴影 */
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.15);
  
  /* 间距 */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-xxl: 3rem;     /* 48px */
  
  /* 字体大小 */
  --font-size-xs: 0.75rem;  /* 12px */
  --font-size-sm: 0.85rem;  /* 13.6px */
  --font-size-md: 1rem;     /* 16px */
  --font-size-lg: 1.25rem;  /* 20px */
  --font-size-xl: 1.5rem;   /* 24px */
  --font-size-xxl: 2rem;    /* 32px */
  
  /* 圆角 */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-full: 50%;
  
  /* 过渡 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* 透明度效果 */
  --opacity-main: 0.3;              /* 主要内容区域透明度 */
  --opacity-hover: 0.9;             /* hover状态透明度 */
  --opacity-border-light: 0.6;      /* 浅色模式边框透明度 */
  --opacity-border-dark: 0.6;       /* 深色模式边框透明度 */
  
  /* 透明背景颜色 (RGB值用于rgba) */
  --color-bg-light: 255, 255, 255;        /* 浅色模式主背景 */
  --color-sidebar-light: 243, 243, 243;   /* 浅色模式侧边栏背景 */
  --color-border-light: 233, 236, 239;    /* 浅色模式边框颜色 */
  --color-bg-dark: 30, 30, 30;            /* 深色模式主背景 */
  --color-sidebar-dark: 37, 37, 37;       /* 深色模式侧边栏背景 */
  --color-border-dark: 58, 58, 58;        /* 深色模式边框颜色 */
}

/* Dark Theme Variables */
:root.dark {
  /* 基础颜色 */
  --background-color: #121212;
  --surface-color: #1D1D1D;
  --border-color: #333333;
  --border-light: #2a2a2a;
  --text-color: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #999999;
  
  /* 主要颜色保持不变 */
  --primary-color: #42b883;
  --primary-light: #4fc08d;
  --primary-dark: #369870;
  
  /* 状态颜色保持不变 */
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --info-color: #409eff;
  
  /* 阴影 */
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.5);
  
  /* Element Plus 深色主题变量 */
  --el-bg-color: #1e1e1e;
  --el-bg-color-page: #121212;
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #cccccc;
  --el-text-color-secondary: #999999;
  --el-border-color: #333333;
  --el-border-color-light: #2a2a2a;
  --el-border-color-lighter: #222222;
  --el-fill-color: #2a2a2a;
  --el-fill-color-light: #222222;
  --el-fill-color-lighter: #1a1a1a;
}